<template>
  <div id="pages">
    <!-- 歌单详情页 -->
    <div id="detail">
      <!-- 歌单图片 -->
      <div class="top">
        <img :src="data.coverImgUrl" alt>
        <!-- 歌单详情介绍 -->
        <div class="right">
          <div>
            <div class="tips">精品歌单</div>
            <h3>{{data.name}}</h3>
          </div>
          <span>
            <b>标签：</b>
            {{tags.expertTags}}
          </span>
          <span>
            <b>简介：</b>
            {{data.description}}
          </span>
        </div>
      </div>
      <!-- 歌单详情页具体内容渲染 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲列表" name="first">
          <el-table ref="singleTable" :data="tableData" style="width: 100%">
            <el-table-column type="index" width="56" label="序号"></el-table-column>
            <el-table-column property="date" label="操作" width="68">
              <template slot-scope="scope">
                <i class="el-icon-video-play" @click="play(scope)"></i>
              </template>
            </el-table-column>
            <el-table-column property="name" label="音乐标题" width="400"></el-table-column>
            <el-table-column property="ar[0].name" label="歌手" width="150"></el-table-column>

            <el-table-column label="专辑" width="250"></el-table-column>
            <el-table-column label="时长" property="dt"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="评论" name="second">
          <div class="chat">
            <!-- 写评论 -->
            <input type="text" v-model="value">
            <!-- <button >评论</button> -->
            <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
            <el-button type="primary" round @click="send">评论</el-button>
          </div>
          <!-- 已有的评论 -->
          <div class="bottom_chat">
            <h4>精彩评论</h4>
            <div v-for="item in chatData" :key="item.id">
              <img :src="item.user.avatarUrl" alt>
              <b>{{item.user.nickname}}:</b>
              <p>{{item.content}}</p>
            </div>
          </div>
        </el-tab-pane>
        <!-- 收藏者 -->
        <el-tab-pane label="收藏者" name="third">
          <div class="store" v-for="item in storeData" :key="item.id">
            <div>
              <img
                :src="item.avatarUrl"
                @click="$router.push({name:'storer',params:{id:item.userId}})"
              >

              <span>{{item.nickname}}</span>
            </div>
          </div>
           <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="1000"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-tab-pane>
         
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { jump, chat, csend, store } from "@/api"; //引入接口方法
export default {
  data() {
    return {
      input: "",
      activeName: "first", //tabs组件默认出现第一个
      jumpData: "",
      data: [], //评论数组
      tags: [], //评论数组
      tableData: [], //歌单分类数组
      chatData: [], //评论数组
      value: "",
      storeData: [], //收藏者数组
      offset: "",
      id:""

      // styleObject: {
      //   color: "red"
      // }
    };
  },
  created() {
    this.jumpData = this.$route.params.id; //拿到Home页歌单传的id
    this.getJump({ id: this.jumpData }); //传值跳转歌单详情
    this.getChat({ id: this.jumpData }); //传值跳转到评论
    this.getStore({ id: this.jumpData }); //传值跳转到收藏者
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    getJump(data) {
      //歌单分类跳转
      // console.log(data);
      jump(data).then(res => {
        // console.log(res)
        //调用接口
        const arr = res.data.playlist.tracks;
        for (let i = 0; i < arr.length; i++) {
          //遍历时长的时间戳转化为时间
          var dt = arr[i].dt;
          var minute = parseInt(parseInt(dt / 1000) / 60);
          var second = parseInt(dt / 1000) - minute * 60;
          if (minute < 10) {
            minute = "0" + minute;
          }
          if (second < 10) {
            second = "0" + second;
          }
          arr[i].dt = minute + ":" + second; //将转化的时间重新赋值再次进行遍历
        }

        this.data = res.data.playlist;
        // console.log(this.data);
        this.tags = res.data.playlist.creator;
        this.tableData = res.data.playlist.tracks; //遍历的数组
        // console.log(this.tableData)
      });
    },
    getChat(data) {
      chat(data).then(res => {
        //调用接口渲染已有的评论
        this.chatData = res.data.hotComments;
        // console.log(this.chatData)
      });
    },
    send() {
      //点击发送评论
      // console.log(this.value);
      this.getCsend({
        //传数据
        t: 1,
        type: 2,
        id: this.jumpData,
        content: this.value //input里面输入的内容
      });
    },
    getCsend(data) {
      csend(data) //调用接口发送评论方法
        .then(res => {
          this.content=res.data.comment.content
          console.log(res.data)
        })
        .catch(err => {
          //错误抛出
          alert("请登录");
        });
    },
    getStore(data) {
      //收藏者
      store(data).then(res => {
        this.storeData = res.data.subscribers;
        // console.log(this.storeData[0].userId);
      });
    },
    handleCurrentChange(val) {
      //获取页数
      // console.log(val);
      let set = (val - 1) * 60;
      this.getStore({ id: this.jumpData, offset: set }); //传id和页数setoff调用接口到下一页
    },
    play(scope) {
      this.id = scope.row.id;
      this.$router.push({
        name: "sing",
        params: { id: this.id, rid: this.jumpData }
      });
    }
  }
};
</script>
<style>
.el-tabs__nav {
  margin-left: 50px;
  margin-top: 50px;
  font-size: 14px;
}
i {
  margin-right: 6px;
  cursor: pointer;
}
input {
  margin-left: 50px;
  margin-top: 20px;
  width: 950px;
  height: 55px;
}

.chat botton {
  width: 40px;
  height: 28px;
  border: 1px solid black;
}
.el-tabs{
  position: relative;
}

.el-tabs .el-pagination{
  display: block;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
</style>
